<template>
    <div class="vip">
      <div class="vip-content">
        <div class="vip-title">交易明细</div>
        <div class="vip-content-box">
          <div class="vip-content-title">交易明细</div>
          <div class="title-line">
            <div class="line-txt">列表</div>
          </div>
          <div class="table-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="Approved by">
                <el-input
                  v-model="formInline.user"
                  placeholder="Approved by"
                  clearable
                />
              </el-form-item>
              <el-form-item label="Activity zone">
                <el-select
                  v-model="formInline.region"
                  placeholder="Activity zone"
                  clearable
                >
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>
              <el-form-item label="Activity time">
                <el-date-picker
                  v-model="formInline.date"
                  type="date"
                  placeholder="Pick a date"
                  clearable
                />
              </el-form-item>
              <el-form-item label="Activity time">
                <el-col :span="11">
                  <el-date-picker
                    v-model="formInline.date1"
                    type="date"
                    placeholder="Pick a date"
                    style="width: 100%"
                  />
                </el-col>
                <el-col :span="2" class="text-center">
                  <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="11">
                  <el-time-picker
                    v-model="formInline.date2"
                    placeholder="Pick a time"
                    style="width: 100%"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="Activity zone">
                <el-select
                  v-model="formInline.region"
                  placeholder="Activity zone"
                  clearable
                >
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">Query</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="date" label="Date" width="180" />
              <el-table-column prop="name" label="Name" width="180" />
              <el-table-column prop="address" label="Address" />
            </el-table>
            <div class="pagination-box">
                <el-pagination background layout="prev, pager, next" :total="1000" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import { reactive } from "vue";
  const formInline = reactive({
    user: "",
    region: "",
    date: "",
    date1: "",
    date2: "",
  });
  
  const onSubmit = () => {
    console.log("submit!");
  };
  const tableData = [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]
  </script>
      
      <style scoped lang="less">
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }
  
  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  .pagination-box{
      display: flex;
      justify-content: flex-end;
      margin-top: 1.5rem;
  }
  .vip {
    padding: 1.5rem;
    box-sizing: border-box;
    .vip-content {
      width: 80rem;
      margin: 0 auto;
      // background: #fcf;
      padding: 2rem;
      box-sizing: border-box;
      .vip-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 1.125rem;
        color: #000000;
        line-height: 1.125rem;
        text-align: left;
        font-style: normal;
      }
      .vip-content-box {
        margin-top: 1.5rem;
        background: #fff;
        padding: 1.5rem;
        box-sizing: border-box;
        border-radius: 1rem;
        .vip-content-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 1.625rem;
          color: #000000;
          text-align: left;
          font-style: normal;
        }
        .title-line {
          border-bottom: 1px solid rgba(0, 0, 0, 0.85);
          margin: 2rem 0;
          .line-txt {
            width: 86px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            background: rgba(0, 0, 0, 0.85);
            border-radius: 8px 8px 0px 0px;
          }
        }
        .vip-cards {
          // display: grid;
          // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          // gap: 2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
  </style> 